<template lang="pug">
  .hro-admin-home
    Row(:gutter="20")
      Col.mb-15(:md="{ span: 24 }" :lg="{ span: 24 }" :xl="{span: 16}" :xxl="{span: 18}")
        .hro-card.mb-12
          .card-title
            .title-left
              img.mr-8(src="@/assets/images/home/card-kehu.png")
              span 客户状态
            .title-right
          ul.step-ul
            //- li(v-for="(item,index) in stepArr" :key="index" :class="index < customerStatus ? 'active' : ''")
            //-   .step-li {{item}}
            template(v-for="(item,index) in stepArr")
              li.line(:class="index < customerStatus ? 'active' : ''")
                .line-div
              li.li-content(:class="index < customerStatus ? 'active' : ''")
                .img-box(:class="'style-' + (index + 1)")
                span.text {{item}}
        .hro-card.mb-12
          Spin(size="large" fix v-if="dataScreenSpin")
          .card-title
            .title-left
              img.mr-8(src="@/assets/images/home/card-shuju.png")
              span 数据详情
            .title-right
              router-link(v-if="hasDataScreening" :to="{ name: 'data-screening'}") 数据看板
          Row.card-container
            Col.data-item(:xl="{span: 24}" :xxl="{span: 24}")
              .item-title
                .text
                  | 数据总览：
                  //- span.blue(@click="gotoRouter('roster')") {{dataScreening?dataScreening.empTotal:'0'}}
                  //- | （人）
              .item-content.warp
                template(v-if="hasRoster")
                  .li.has-r-border(@click="gotoRouter('waitInduction')")
                    .li-img.style-2
                      img.mb-10(src="@/assets/images/home_customer/dairuzhi.png")
                      span 待入职<br/>员工(人)
                    .li-number
                      count-to(:end="dataScreening?dataScreening.toBeEmployee:0" count-class="count-style")
                  .li.has-r-border(@click="gotoRouter('roster', 1)")
                    .li-img.style-4
                      img.mb-10(src="@/assets/images/home_customer/zaizhi.png")
                      span 在职(人)
                    .li-number
                      count-to(:end="dataScreening?dataScreening.inEmployee:0" count-class="count-style")
                  .li.has-r-border(@click="gotoRouter('roster', 0)")
                    .li-img.style-3
                      img.mb-10(src="@/assets/images/home_customer/lizhi.png")
                      span 离职(人)
                    .li-number
                      count-to(:end="dataScreening?dataScreening.outEmployee:0" count-class="count-style")
                  .li.has-r-border(@click="gotoRouter('socialWagesManage', -1)")
                    .li-img.style-5
                      img.mb-10(src="@/assets/images/home_customer/shebaodaiyuleiji.png")
                      span 社保待遇<br/>累计(条)
                    .li-number
                      count-to(:end="dataScreening?dataScreening.ssTreatmentTotal:0" count-class="count-style")
                  .li.has-r-border(@click="gotoRouter('fundWagesManage', -1)")
                    .li-img.style-6
                      img.mb-10(src="@/assets/images/home_customer/gongjijindaiyuleiji.png")
                      span 公积金待遇<br/>累计(条)
                    .li-number
                      count-to(:end="dataScreening?dataScreening.pfTreatmentTotal:0" count-class="count-style")
                  .li.has-r-border(@click="gotoRouter('commercialWagesManage', -1)")
                    .li-img.style-1
                      img.mb-10(src="@/assets/images/home_customer/shangbaodaiyuleiji.png")
                      span 商保待遇<br/>累计(条)
                    .li-number
                      count-to(:end="dataScreening?dataScreening.ciTreatmentTotal:0" count-class="count-style")
                //- template(v-if="!hasRoster")
                //-   .li.no-hover
                //-     .li-img.style-4
                //-       img.mb-10(src="@/assets/images/home/yuangong-1.png")
                //-       span 在职
                //-     .li-number
                //-       count-to(:end="dataScreening?dataScreening.inEmployee:0" count-class="count-style")
                //-   .li.no-hover
                //-     .li-img.style-5
                //-       img.mb-10(src="@/assets/images/home/yuangong-2.png")
                //-       span 离职
                //-     .li-number
                //-       count-to(:end="dataScreening?dataScreening.outEmployee:0" count-class="count-style")
                //-   .li.no-hover
                //-     .li-img.style-2
                //-       img.mb-10(src="@/assets/images/home/yuangong-3.png")
                //-       span 离职未报停
                //-     .li-number
                //-       count-to(:end="dataScreening?dataScreening.outNoStopEmployee:0" count-class="count-style")
            Divider
            Col.data-item(:xl="{span: 24}" :xxl="{span: 24}")
              .item-title
                .text 当月服务情况
            Col.data-item(:xl="{span: 20}" :xxl="{span: 20}")
              .item-content.warp
                .li.has-r-border(@click="gotoPage('ssChangesVerifyManage',{hasTime:true, hasStatus: false})")
                  .li-img.style-5
                    img.mb-10(src="@/assets/images/home_customer/shebaoyidong.png")
                    span 社保异动(人)
                  .li-number
                    count-to(:end="serviceOf?serviceOf.socialSecurityChange:0" count-class="count-style")
                //- template(v-if="!hasSS")
                //-   .li.has-r-border.no-hover
                //-     .li-img.style-5
                //-       img.mb-10(src="@/assets/images/home_customer/shiyongzhinan.png")
                //-       span 社保异动(人)
                //-     .li-number
                //-       count-to(:end="serviceOf?serviceOf.socialSecurityChange:0" count-class="count-style")
                //- template(v-if="hasAf")
                .li.has-r-border(@click="gotoPage('afChangesVerifyManage',{hasTime:true, hasStatus: false})")
                  .li-img.style-6
                    img.mb-10(src="@/assets/images/home_customer/gongjijinyidong.png")
                    span 公积金异动(人)
                  .li-number
                    count-to(:end="serviceOf?serviceOf.providentFundChange:0" count-class="count-style")
                //- template(v-if="!hasAf")
                //-   .li.has-r-border.no-hover
                //-     .li-img.style-6
                //-       img.mb-10(src="@/assets/images/home_customer/shiyongzhinan.png")
                //-       span 公积金异动
                //-     .li-number
                //-       count-to(:end="serviceOf?serviceOf.providentFundChange:0" count-class="count-style")
                //- template(v-if="hasCi")
                .li.has-r-border(@click="gotoPage('ciChangesVerifyManage',{hasTime:true, hasStatus: false})")
                  .li-img.style-1
                    img.mb-10(src="@/assets/images/home_customer/shangbaoyidong.png")
                    span 商保异动
                  .li-number
                    count-to(:end="serviceOf?serviceOf.commercialInsuranceChange:0" count-class="count-style")
                //- template(v-if="!hasCi")
                //-   .li.has-r-border.no-hover
                //-     .li-img.style-1
                //-       img.mb-10(src="@/assets/images/home_customer/shiyongzhinan.png")
                //-       span 商保异动
                //-     .li-number
                //-       count-to(:end="serviceOf?serviceOf.commercialInsuranceChange:0" count-class="count-style")
                template
                  .li.has-r-border(@click="gotoBill('CustomerBillList')")
                    .li-img.style-7
                      img.mb-10(src="@/assets/images/home_customer/zhangdanjine.png")
                      span 本月账单<br/>金额(元)
                    .li-number
                      //- p {{serviceOf.totalBillAmount}}
                      count-to(:end="serviceOf?serviceOf.totalBillAmount:0" count-class="count-style" :decimals="2")
                template
                  .li.has-r-border(@click="gotoBill('CustomerBillList')")
                    .li-img.style-2
                      img.mb-10(src="@/assets/images/home_customer/daifukuan.png")
                      span 待付款(元)
                    .li-number
                      count-to(:end="serviceOf?serviceOf.toBePaidAmount:0" count-class="count-style" :decimals="2")
            Divider
            Col.data-item(span="12")
              .item-title
                .text
                  | 待遇情况
                  span.tag.ml-5.font-12 办理中
              .item-content.warp
                .li.has-r-border(@click="gotoRouter('socialWagesManage')")
                  .li-img.style-5
                    img.mb-10(src="@/assets/images/home_customer/shebaofeiyong.png")
                    span 社保待遇(条)
                  .li-number
                    count-to(:end="treatmentSituation?treatmentSituation.ssTreatment:0" count-class="count-style" :decimals="0")
                .li.has-r-border(@click="gotoRouter('fundWagesManage')")
                  .li-img.style-6
                    img.mb-10(src="@/assets/images/home_customer/gongjijindaiyu.png")
                    span 公积金待遇(条)
                  .li-number
                    count-to(:end="treatmentSituation?treatmentSituation.pfTreatment:0" count-class="count-style" :decimals="0")
                .li.has-r-border(@click="gotoRouter('commercialWagesManage')")
                  .li-img.style-1
                    img.mb-10(src="@/assets/images/home_customer/shangbaofeiyong.png")
                    span 商保待遇(条)
                  .li-number
                    count-to(:end="treatmentSituation?treatmentSituation.ciTreatment:0" count-class="count-style" :decimals="0")
            Col.data-item(span="8" offset="4")
              .item-title
                .text
                  | 到期提醒
              .item-content.warp
                .li.has-r-border.no-hover(v-if="expirationReminder && expirationReminder.dueCustomer <= 60")
                  .li-img.style-3
                    img.mb-10(src="@/assets/images/home_customer/kehuhetong.png")
                    span(v-if="expirationReminder.dueCustomer < 0") 客户合同<br>已过期(天)
                    span(v-else) 客户合同即将<br>到期(天)
                  .li-number
                    count-to(:end="expirationReminder?Math.abs(expirationReminder.dueCustomer):0" count-class="count-style")
                .li(@click="gotoDue('roster', true)" :class="expirationReminder && expirationReminder.dueCustomer <= 60 ? 'has-r-border' : ''")
                  .li-img.style-1
                    img.mb-10(src="@/assets/images/home_customer/yuangongdaoqi.png")
                    span 员工到期<br>< 60(天)
                  .li-number
                    count-to(:end="expirationReminder?expirationReminder.dueEmployee:0" count-class="count-style")
            Divider
      Col.mb-15(:md="{ span: 24 }" :lg="{ span: 24 }" :xl="{span: 8}" :xxl="{span: 6}")
        .hro-card.log
          Spin(size="large" fix v-if="loggerSpin")
          .card-title
            .title-left
              img.mr-8(src="@/assets/images/home/card-log.png")
              span 操作日志
            .title-right.more-span.text-gray-9(@click="gotoRouter('loggerList')")
              span
              | 查看更多
              Icon(type="ios-arrow-forward")
          .no-data(v-if="loggerList.length < 1") 暂无操作日志
          .oplog-content
            Timeline
              TimelineItem(v-for="(item,index) in loggerList" :key="index")
                span.font-12 {{item.operateOn.slice(0, 19).replace(/T/g,' ')}}
                div
                  span.mr-8 {{item.operateByName}}
                  span.mr-8 {{item.title}}
                .font-12.text-gray-9 IP：{{item.ipAddress}}
    Modal(v-model="customize" title="自定义" width="800" @on-ok="saveFastMenuList")
      Spin(size="large" fix v-if="customFastMenuListSpin")
      CheckboxGroup(v-model="fastMenuListId" @on-change="fastMenuListChange")
        Checkbox(v-for="(item,index) in customFastMenuList" :label="item.id" style="padding: 10px" :key="index") {{item.title}}
</template>

<script>
import Mixin from './homeMixin.js'
import CountTo from '_c/count-to'
// import homeApi from '@/api/home.api.js'

export default {
  components: {
    CountTo
  },
  data () {
    return {
      stepArr: ['账单生成', '账单核对', '申请开票', '付款', '开票']
    }
  },
  mixins: [Mixin],
  created () {
    this.getCustomerStatus()
    // this.getClientWorkBench()
  },
  computed: {
    actionArr () {
      let arr = this.$store.state.user.actionAccess.map(item => {
        return item.code
      })
      return arr
    },
    hasDataScreening () {
      return this.actionArr.indexOf('ShuJuKanBan') > -1
    }
  },
  methods: {
    routerArrChange (e) {
      console.log(e)
    }
  }
}
</script>


<style lang="less" scoped>
  .oplog-content{
    height: 1091px;
    overflow: auto;
  }
  .fast-menu{
    height: 177px;
    overflow: auto;
  }
</style>
